<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import axios from "axios";
import Footer from "../components/Footer.vue";
import {findAllByUidOrByUidAndBid, findFoodById, getBusinessByBusinessId, listOrdersByUserId} from "../network/api.ts";


const route = useRoute()
const router = useRouter()
let user = ref({
  userId:sessionStorage.getItem("userId"),
  password:"",
  userName:sessionStorage.getItem("userName"),
  userSex:sessionStorage.getItem("userSex"),
  userImg:""
})
let orderdetailet = reactive({
  odId:0,
  orderId:0,
  foodId:0,
  quantity:0,
  food:{
    foodId:0,
    foodName:"",
    foodExplain:"",
    foodImg:"",
    foodPrice:0.0,
    businessId:0,
    remarks:""
  }
})
let order = reactive({
  orderId:0,
  userId:'',
  businessId:0,
  orderDate:"",
  orderTotal:0.0,
  daId:0,
  orderState:0,
  isShowDetailet:ref(false), //该页需要这个属性
  business: reactive({
    businessId:'',
    businessName:'',
    businessAddress:'',
    businessExplain:'',
    bussinessImg:'',
    orderTypeId:1,
    starPrice:0.0,
    deliveryPrice:0.0,
    remarks:'',
    quantity:1
  }),
  list:reactive([orderdetailet])
})
let orderArr = ref([order])
let isShowDetailet = ref(false)
let isShowDetailetList = ref([isShowDetailet])

onMounted(()=>{
  getOrderArr()
})

async function getOrderArr(){
  let resOrder = await listOrdersByUserId(user.value.userId);
  orderArr.value = resOrder.data.result
  console.log(orderArr.value)
  for(let i =0; i<orderArr.value.length;i++){
    let resBusiness = await getBusinessByBusinessId(orderArr.value[i].businessId)
    if(resBusiness.data.code!=555){
      orderArr.value[i].business = resBusiness.data.result
      console.log(orderArr.value[i].business)
      for(let j =0;j<orderArr.value[i].list.length;j++ ){
        let resFood = await findFoodById(orderArr.value[i].list[j].foodId)
        orderArr.value[i].list[j].food = resFood.data.result
        console.log(orderArr.value[i].list[j].food)
      }
    }else{
      router.push("/serviceDown")
    }

  }

}

function detailetShow(index){
  isShowDetailetList.value[index] = !isShowDetailetList.value[index]
  console.log("此时的index = "+index)
  console.log("isShowDetailetList.value[index] = "+isShowDetailetList.value[index])
}
</script>

<template>
  <div class="wrapper w-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>我的订单</p>
    </header>

    <div class="pb-14vw">
      <!-- 订单列表部分 -->
      <h3 class="mt-12vw box-border p-4vw text-4vw font-300 text-#999">未支付订单信息：</h3>
      <ul class="order  w-full">
        <!--      index 从0开始-->
        <li v-for="(item,index) in orderArr"
            class="w-full">
          <template v-if="item.orderState==0">
            <div class="order-info box-border px-2vw py-4vw text-4vw text-#666 flex justify-between items-center">
              <div class="flex justify-center items-center">
                <p>{{item.business?.businessName}}</p>
                <div class="fa-caret-down w-5vw mt-0.5vw hover:text-#0097EF" @click="detailetShow(index)">
                  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 256 256"><path fill="currentColor" d="m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z"/></svg>

                </div>
              </div>
              <div class="order-info-right flex">
                <p>&#165;{{item.orderTotal}}</p>
                <div class="order-info-right-icon bg-#f90 text-white rounded-3px ml-2vw select-none cursor-pointer">去支付</div>
              </div>
            </div>
            <ul class="order-detailet w-full" v-show="isShowDetailetList[index]">
              <li v-for="odItem in item.list"
                  class=" box-border px-3vw py-4vw text-#666 text-3vw flex justify-between items-center">
                <p>{{odItem.food?.foodName}} x {{odItem.quantity}}</p>
                <p>&#165;{{odItem.food?.foodPrice*odItem.quantity}}</p>
              </li>
              <li class="box-border px-3vw py-4vw text-#666 text-3vw flex justify-between items-center">
                <p>配送费</p>
                <p>&#165;{{item.business?.deliveryPrice}}</p>
              </li>
            </ul>
          </template>
        </li>
      </ul>

      <h3 class="mt-12vw box-border p-4vw text-4vw font-300 text-#999 ">已支付订单信息：</h3>
      <ul class="order  w-full">
        <li v-for="(item,index) in orderArr"
            class="w-full ">
          <!--        v-if="item.orderState==1"   如果讲这句话放在上面的li中 一起判断, 那个就会会识别不出item, 因为这个时候item还没渲染出来, 所以需要单独放-->
          <template v-if="item.orderState==1">
            <div class="order-info box-border px-2vw py-4vw text-4vw text-#666 flex justify-between items-center">
              <div class="flex justify-center items-center ">
                <p>{{item.business?.businessName}}</p>
                <div class="fa-caret-down w-5vw mt-0.5vw " @click="detailetShow(index)">
                  <svg class="" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 256 256"><path d="m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z"/></svg>
                </div>
              </div>
              <div class="order-info-right flex">
                <p>&#165;{{item.orderTotal}}</p>
              </div>
            </div>
            <ul class="order-detailet w-full"
                v-show="isShowDetailetList[index]"
            >
              <li v-for="odItem in item.list"
                  class="box-border px-3vw py-4vw text-#666 text-3vw flex justify-between items-center">
                <p>{{ odItem.food?.foodPrice * odItem }}</p>
                <p>&#165;{{ odItem.food?.foodPrice * odItem }}</p>
              </li>
              <li class="box-border px-3vw py-4vw text-#666 text-3vw flex justify-between items-center">
                <p>配送费</p>
                <p>&#165;{{item.business?.deliveryPrice}}</p>
              </li>
            </ul>
          </template>

        </li>
      </ul>
    </div>


    <!-- 底部菜单部分 -->
    <Footer></Footer>

  </div>
</template>

<style scoped>

</style>